<template>
    <div class="app-container">

        <div class="header">
            <el-button type="primary" size="mini" @click="showSaveScores">添加</el-button>
            <span style="margin-left: 100px;">请选择学期：</span>
            <el-select v-model="selectGetCourseListSemesterIdForm.semesterMessage" placeholder="请选择"
                popper-class="blueSecoend" :popper-append-to-body="false" value-key="semesterId"
                @change="selectGetCourseListSemesterId">
                <el-option v-for="item in semesterList" :key="item.semesterId" :label="item.semesterMessage"
                    :value="item">
                </el-option>
            </el-select>
        </div>

        <!-- 添加成绩弹出框 -->
        <el-dialog title="添加成绩" :visible.sync="showSaveScoresForm" :close-on-click-modal="false"
            @close="closeSaveScoresForm" width="75%">
            <el-form ref="saveScoresForm" :model="saveScoresForm" label-width="100px" :rules="saveScoresRules">
                <el-form-item label="课程" prop="courseId" :rules="checkSelectCourseId">
                    <el-select v-model="selectCourseIdForm.courseName" placeholder="请选择" popper-class="url"
                        :popper-append-to-body="false" value-key="courseId" @change="selectCourseId"
                        style="width: 700px;">
                        <el-option v-for="item in courseList" :key="item.courseId" :label="item.courseName"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="课程类别" prop="categoryId" :rules="checkSelectCategoryId">
                    <el-select v-model="selectCategoryIdForm.categoryName" placeholder="请选择" popper-class="blueSecoend"
                        :popper-append-to-body="false" value-key="categoryId" @change="selectCategoryId">
                        <el-option v-for="item in categoryList" :key="item.categoryId" :label="item.categoryName"
                            :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期" :rules="checkSelectSemesterId" prop="semesterId">
                    <el-select v-model="selectSemesterIdForm.semesterMessage" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="semesterId"
                        @change="selectSemesterId">
                        <el-option v-for="item in semesterList" :key="item.semesterId" :label="item.semesterMessage"
                            :value="item">
                            {{ item.semesterMessage }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试时间" prop="time">
                    <div class="block">
                        <el-date-picker @change="makeSaveScoresExamDateYM" v-model="saveScoresForm.time" type="month"
                            placeholder="选择年月">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="是否重考">
                    <el-radio v-model="saveScoresForm.rebuild" @input="isRebuildChange" :label="0" border>通过</el-radio>
                    <el-radio v-model="saveScoresForm.rebuild" @input="isRebuildChange" :label="1" border>重修</el-radio>
                </el-form-item>
                <el-form-item label="学号" prop="studentNum">
                    <el-input v-model="saveScoresForm.studentNum" type="number"></el-input>
                </el-form-item>
                <el-form-item label="总成绩" prop="grade">
                    <el-input v-model="saveScoresForm.grade"></el-input>
                </el-form-item>
                <el-form-item label="学分" prop="crs">
                    <el-input v-model="saveScoresForm.crs"></el-input>
                </el-form-item>
                <el-form-item label="学时" prop="hours">
                    <el-input v-model="saveScoresForm.hours"></el-input>
                </el-form-item>
                <el-form-item label="绩点" prop="gradePoints">
                    <el-input v-model="saveScoresForm.gradePoints"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="saveScoresData">提交</el-button>
                    <el-button @click="closeSaveScoresForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改成绩弹出框 -->
        <el-dialog title="修改成绩" :visible.sync="showEditScoresForm" :close-on-click-modal="false"
            @close="closeEditScoresForm" width="75%">
            <el-form ref="editScoresForm" :model="editScoresForm" label-width="100px" :rules="editScoresRules">
                <el-form-item label="学期" :rules="checkSelectSemesterId" prop="semesterId">
                    <el-select v-model="selectSemesterIdForm.semesterMessage" placeholder="请选择"
                        popper-class="blueSecoend" :popper-append-to-body="false" value-key="semesterId"
                        @change="selectSemesterId">
                        <el-option v-for="item in semesterList" :key="item.semesterId" :label="item.semesterMessage"
                            :value="item">
                            {{ item.semesterMessage }}
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="考试时间" prop="scoresTime">
                    <div class="block">
                        <el-date-picker @change="makeEditScoresExamDateYM" v-model="editScoresForm.scoresTime"
                            type="month" placeholder="选择年月">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="是否重考">
                    <el-radio v-model="editScoresForm.scoresRebuild" @input="isRebuildChange" :label="0"
                        border>通过</el-radio>
                    <el-radio v-model="editScoresForm.scoresRebuild" @input="isRebuildChange" :label="1"
                        border>重修</el-radio>
                </el-form-item>
                <el-form-item label="学号" prop="studentNum">
                    <el-input v-model="editScoresForm.studentNum" type="number"></el-input>
                </el-form-item>
                <el-form-item label="总成绩" prop="scoresGrade">
                    <el-input v-model="editScoresForm.scoresGrade"></el-input>
                </el-form-item>
                <el-form-item label="学分" prop="scoresCrs">
                    <el-input v-model="editScoresForm.scoresCrs"></el-input>
                </el-form-item>
                <el-form-item label="学时" prop="scoresHours">
                    <el-input v-model="editScoresForm.scoresHours"></el-input>
                </el-form-item>
                <el-form-item label="绩点" prop="scoresGradePoints">
                    <el-input v-model="editScoresForm.scoresGradePoints"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="editScoresData">提交</el-button>
                    <el-button @click="closeEditScoresForm">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 成绩列表 -->
        <div class="content">
            <el-table :data="scoresList" style="width: 100%;" stripe
                :default-sort="{ prop: 'date', order: 'descending' }">
                <el-table-column label="成绩表">
                    <el-table-column label="课程名" prop="scoresCourseName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="课程号" prop="scoresCourseNumber">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseNumber }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="总成绩" prop="scoresGrade">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresGrade }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="课序号" prop="scoresCourseOrdinal">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseOrdinal }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="课程类别" prop="scoresCourseCategoryName">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseCategoryName }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="课程性质" prop="scoresCourseNature">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseNature == 0 ? '必修' : '选修' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="学分" prop="scoresCrs">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCrs }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="学时" prop="scoresHours">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresHours }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="修读方式" prop="scoresCourseStudy">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseStudy }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="是否主修" prop="scoresCourseMajor">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresCourseMajor == 0 ? '是' : '否' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="考试日期" prop="scoresTime">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresTime }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="绩点" prop="scoresGradePoints">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresGradePoints }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="重修重考" prop="scoresRebuild">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresRebuild == 0 ? '通过' : '重修' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="学期ID" prop="semesterId">
                        <template slot-scope="scope">
                            <div>{{ scope.row.semesterId }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="用户ID" prop="scoresUserId">
                        <template slot-scope="scope">
                            <div>{{ scope.row.scoresUserId }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <el-table-column label="修改" width="80">
                        <template slot-scope="scope">
                            <el-button type="primary" circle @click="showEditScores(scope.row.scoresId)"
                                icon="el-icon-edit"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete"
                                @click="delScores(scope.row.scoresId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="scoresListSizeChange" @current-change="scoresListCurrentChange"
                :page-size="scoresListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="scoresListTotal" style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getScoresList, saveScores, getUpdateScoresInfo, editScores, deleteScores, getAllSemesterListBySelect, getAllCourseListBySelect, getAllCategoryListBySelect, } from '../../api/api'
import { Message } from 'element-ui'
export default {
    data() {
        return {
            showSaveScoresForm: false,
            showEditScoresForm: false,
            scoresList: [],
            scoresListTotal: null,
            scoresListForm: {
                semesterId: null
            },
            courseList: [],
            semesterList: [],
            categoryList: [],
            saveScoresRules: {
                studentNum: [
                    { required: true, message: '请输入学号', trigger: 'change' },
                    { type: 'number', message: '必须是数字格式', trigger: 'blur', transform: (value) => Number(value) }
                ],
                time: [
                    {
                        required: true, message: '请选择考试时间', trigger: ['blur', 'change']
                    },
                ],
                grade: [
                    { required: true, message: '请输入总成绩', trigger: 'change' }
                ],
                crs: [
                    { required: true, message: '请输入学分', trigger: 'change' }
                ],
                hours: [
                    { required: true, message: '请输入学时', trigger: 'change' }
                ],
                gradePoints: [
                    { required: true, message: '请输入绩点', trigger: 'change' }
                ]
            },
            saveScoresForm: {
                courseId: null,
                categoryId: null,
                semesterId: null,
                time: '',
                rebuild: 0,
                studentNum: null,
                grade: '',
                crs: '',
                hours: '',
                gradePoints: ''
            },
            editScoresForm: {
                scoresId: null,
                studentNum: null,
                scoresGrade: '',
                scoresCrs: '',
                scoresHours: '',
                scoresTime: '',
                scoresGradePoints: '',
                scoresRebuild: 0,
                semesterId: null
            },
            editScoresRules: {
                studentNum: [
                    { required: true, message: '请输入学号', trigger: 'change' },
                    { type: 'number', message: '必须是数字格式', trigger: 'blur', transform: (value) => Number(value) }
                ],
                scoresTime: [
                    {
                        required: true, message: '请选择考试时间', trigger: ['blur', 'change']
                    },
                ],
                scoresGrade: [
                    { required: true, message: '请输入总成绩', trigger: 'change' }
                ],
                scoresCrs: [
                    { required: true, message: '请输入学分', trigger: 'change' }
                ],
                scoresHours: [
                    { required: true, message: '请输入学时', trigger: 'change' }
                ],
                scoresGradePoints: [
                    { required: true, message: '请输入绩点', trigger: 'change' }
                ]
            },
            selectCourseIdForm: {
                courseName: ''
            },
            selectCategoryIdForm: {
                categoryName: ''
            },
            selectSemesterIdForm: {
                semesterMessage: ''
            },
            selectGetCourseListSemesterIdForm: {
                semesterMessage: ''
            },
            checkSelectCourseId: [{
                required: true,
                message: '请选择课程',
                validator: this.courseIdValidator
            }],
            checkSelectCategoryId: [{
                required: true,
                message: '请选择课程类别',
                validator: this.categoryIdValidator
            }],
            checkSelectSemesterId: [{
                required: true,
                message: '请选择学期',
                validator: this.semesterIdValidator
            }],

        }
    },
    methods: {
        makeSaveScoresExamDateYM(vm) {
            if (vm !== null) {
                this.saveScoresForm.time = vm.getFullYear() + '-' + (vm.getMonth() + 1)
            }
        },
        makeEditScoresExamDateYM(vm) {
            if (vm !== null) {
                this.editScoresForm.scoresTime = vm.getFullYear() + '-' + (vm.getMonth() + 1)
            }
        },
        courseIdValidator(rule, value, callback) {
            if (this.selectCourseIdForm.courseName === '') {
                callback(new Error('请选择课程'))
            } else {
                callback()
            }
        },
        categoryIdValidator(rule, value, callback) {
            if (this.selectCategoryIdForm.categoryName === '') {
                callback(new Error('请选择课程类别'))
            } else {
                callback()
            }
        },
        semesterIdValidator(rule, value, callback) {
            if (this.selectSemesterIdForm.semesterMessage === '') {
                callback(new Error('请选择款式图片'))
            } else {
                callback()
            }
        },

        selectGetCourseListSemesterId(e) {
            this.scoresListForm.semesterId = e.semesterId
            this.selectGetCourseListSemesterIdForm.semesterMessage = e.semesterMessage
            this.getScoresListData()
        },

        // 获取成绩列表
        getScoresListData() {
            getScoresList(this.scoresListForm).then((res) => {
                if (res.code == 200) {
                    this.scoresList = res.data
                    this.scoresListTotal = res.total
                    console.log('成绩列表', res)
                }
            })
        },
        scoresListSizeChange(e) {
            this.scoresListForm.size = e
            this.getScoresListData()
        },
        scoresListCurrentChange(e) {
            this.scoresListForm.page = e
            this.getScoresListData()
        },

        getAllCategoryListData() {
            getAllCategoryListBySelect().then((res) => {
                if (res.code == 200) {
                    this.categoryList = res.data
                    console.log('全部课程类别列表', res);
                }
            })
        },
        getAllSemesterListData() {
            getAllSemesterListBySelect().then((res) => {
                if (res.code == 200) {
                    console.log('全部学期列表', res)
                    this.semesterList = res.data
                }
            })
        },

        getAllCourseListData() {
            getAllCourseListBySelect().then((res) => {
                if (res.code == 200) {
                    console.log('全部课程列表', res)
                    this.courseList = res.data
                }
            })
        },

        showSaveScores() {
            this.showSaveScoresForm = true
            this.getAllCategoryListData()
            this.getAllSemesterListData()
            this.getAllCourseListData()
            this.isRebuildChange(0)
        },

        // 关闭成绩信息添加弹出框
        closeSaveScoresForm() {
            this.showSaveScoresForm = false
            this.$nextTick(() => {
                this.$refs.saveScoresForm.resetFields()
                this.isRebuildChange(0)
                this.$set(this.selectCourseIdForm, 'courseName', '')
                this.$set(this.selectCategoryIdForm, 'categoryName', '')
                this.$set(this.selectSemesterIdForm, 'semesterMessage', '')
            })
        },
        showEditScores(scoresId) {
            this.editScoresForm.scoresId = scoresId
            this.showEditScoresForm = true
            let query = {
                scoresId
            }
            getUpdateScoresInfo(query).then((res) => {
                if (res.code == 200) {
                    console.log('修改成绩（数据回显）', res)
                    this.editScoresForm.studentNum = res.data.scoresCourseNumber
                    this.editScoresForm.scoresGrade = res.data.scoresGrade
                    this.editScoresForm.scoresCrs = res.data.scoresCrs
                    this.editScoresForm.scoresHours = res.data.scoresHours
                    this.editScoresForm.scoresGradePoints = res.data.scoresGradePoints
                    this.editScoresForm.scoresTime = res.data.scoresTime
                    this.editScoresForm.scoresRebuild = res.data.scoresRebuild
                    this.selectSemesterIdForm.semesterMessage = res.data.semesterId
                }
            })
        },

        // 编辑-提交
        editScoresData() {
            console.log(JSON.stringify(this.editScoresForm))
            editScores(this.editScoresForm).then((res) => {
                if (res.code == 200) {
                    Message({
                        message: '修改成功',
                        type: 'success',
                        duration: 3000
                    })
                    console.log('修改成绩', res)
                    setTimeout(() => {
                        this.showEditScoresForm = false
                    }, 2000)
                    this.getScoresListData()
                } else {
                    Message(({
                        message: '修改失败',
                        type: 'success',
                        duration: 2000
                    }))
                }
            })
        },

        // 关闭成绩修改弹框
        closeEditScoresForm() {
            this.showEditScoresForm = false
        },

        isRebuildChange(e) {
            this.saveScoresForm.rebuild = e
            this.editScoresForm.scoresRebuild = e
        },
        selectCourseId(e) {
            this.saveScoresForm.courseId = e.courseId
            this.selectCourseIdForm.courseName = e.courseName
        },
        selectCategoryId(e) {
            this.saveScoresForm.categoryId = e.categoryId
            this.selectCategoryIdForm.categoryName = e.categoryName
        },
        selectSemesterId(e) {
            this.editScoresForm.semesterId = e.semesterId
            this.saveScoresForm.semesterId = e.semesterId
            this.selectSemesterIdForm.semesterMessage = e.semesterMessage
        },
        // 保存成绩，提交
        saveScoresData() {
            console.log(JSON.stringify(this.saveScoresForm))
            this.$refs.saveScoresForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单！',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                } else {
                    saveScores(this.saveScoresForm).then((res) => {
                        if (res.code == 200) {
                            console.log('添加成绩', res);
                            Message(({
                                message: '添加成功',
                                type: 'success',
                                duration: 2000
                            }))
                            this.getScoresListData()
                            setTimeout(() => {
                                this.showSaveScoresForm = false
                                this.$nextTick(() => {
                                    this.$refs.saveScoresForm.resetFields()
                                    this.isRebuildChange(0)
                                    this.$set(this.selectCourseIdForm, 'courseName', '')
                                    this.$set(this.selectCategoryIdForm, 'categoryName', '')
                                    this.$set(this.selectSemesterIdForm, 'semesterMessage', '')
                                })
                            }, 1500)
                        } else {
                            Message(({
                                message: '添加失败',
                                type: 'success',
                                duration: 2000
                            }))
                        }
                    })
                }
            })
        },
        delScores(scoresId) {
            let query = {
                scoresId
            }
            this.$confirm('是否删除该成绩?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteScores(query).then((res) => {
                    if (res.code == 200) {
                        console.log('删除成功', res);
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            duration: 3000
                        })
                        this.getScoresListData()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败',
                            duration: 3000
                        })
                    }
                })
            }).catch(() => {
            })
        }
    },
    created() {
        utils.checkLogin()
        this.getScoresListData()
        this.getAllSemesterListData()
    },

}
</script>

<style lang="less" scoped>
.app-container {
    padding: 40px;

    .header {
        align-items: center;
        display: flex;
        margin-bottom: 20px;

        .el-icon-search {
            cursor: pointer;
            margin-right: 4px;
            margin-top: 8px;
        }

    }

    .url {
        .el-select-dropdown__item {
            height: 100%;
        }
    }


    .content {
        text-align: center;
    }
}
</style>